<template>
  <div>
    <el-dialog v-loading="loading" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showDialog" width="30%" :show-close="false" :center="true" :append-to-body="true">
      <div class="order">
        <div v-for="item of list" :key="item.id" class="order-content" @click="handleDetail(item)"><p>{{ item.order_no }}</p><p>点击处理</p> </div>
      </div>
      <div slot="title" class="dialog-title">
        <div class="el-icon-warning" style="color:#F56C6C"> 未处理订单</div>
        <!-- <svg-icon icon-class="list" class-name="custom-class" /> -->
        <!-- 未处理订单 -->
      </div>
    </el-dialog>
    <iframe ref="iframe" src="" allow="autoplay" style="display: none" />
    <audio id="audio" ref="audio" muted="true" :src="src" autoplay />
  </div>
</template>

<script>
import { untreatedOrder } from '@/api/order'
import { mapGetters } from 'vuex'
// import Sound from '@/utils/audio'

export default {
  name: '',
  data() {
    return {
      timer: null,
      list: [],
      loading: true,
      timer2: null,
      loop: true,
      src: require('../../assets/10959.mp3'),
      audioTimer: null,
      delay: 30 * 1000,
      play: false,
      iframeSrc: require('../../assets/10959.mp3')
    }
  },
  computed: {
    ...mapGetters(['token', 'showDialog'])
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.setCheckUntreatedOrder()
      this.getUntreatedOrder()
      this.$refs.iframe.src = ''
    })
  },
  beforeDestroy() {
    document.body.removeEventListener('click', () => {})
  },
  methods: {
    // 检测未处理订单
    setCheckUntreatedOrder() {
      const { delay } = this
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(async() => {
        await this.getUntreatedOrder()
        this.timer = null
        this.setCheckUntreatedOrder()
      }, delay)
      this.$once('hook:beforeDestroy', () => {
        clearTimeout(this.timer)
      })
    },
    // 跳转详情页
    handleDetail(scope) {
      this.$store.dispatch('app/setShowDialog', false)
      const { order_no, sub_type } = scope
      switch (sub_type) {
        case 1:
          this.$router.push({
            path: `/order/hotel/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 2:
          this.$router.push({
            path: `/order/cate/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 3:
          this.$router.push({
            path: `/order/ktv/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 4:
          this.$router.push({
            path: `/order/scenic/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 5:
          this.$router.push({
            path: `/order/other/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        default:
          this.$router.push({
            path: `/order/singleOrder/OrderDetail`,
            query: {
              order_no
            }
          })
          break
      }
    },
    // 获取未处理订单
    async getUntreatedOrder() {
      if (!this.token) return
      const res = await untreatedOrder()
      const { lists } = res.data
      this.loading = false
      this.list = lists
      if (lists.length) {
        this.initAudio()
        this.$store.dispatch('app/setShowDialog', true)
        // this.$store.dispatch('app/setSaleDialog', false)
      } else {
        this.$store.dispatch('app/setShowDialog', false)
        this.$refs.audio.pause()
      }
    },
    initAudio() {
      const audio = document.getElementById('audio')
      audio.play().then((res) => {
        audio.autoplay = true
        audio.muted = false
        audio.volume = 0.7
        document.body.removeEventListener('click', () => {})
      }).catch(() => {
        if (!audio.muted) return false
        document.body.addEventListener('click', function(e) {
          console.log(1)
          audio.autoplay = true
          audio.muted = false
          audio.volume = 0.7
          audio.play()
        })
      })
      // const removeAudio = document.getElementById('iframe')
      // removeAudio ? removeAudio.parentNode.removeChild(removeAudio) : ''
      // const audio = document.createElement('iframe')
      // audio.src = this.src
      // audio.id = 'iframe'
      // audio.type = 'audio/wav'
      // audio.allow = 'autoplay'
      // audio.style.display = 'none'
      // // audio.hidden = true
      // document.body.appendChild(audio)
    }
    // handleMove() {
    //   console.log('爱仕达多')
    // },
    // async startSound(file) {
    //   console.log(file)
    //   const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
    //   const audio = new Sound(file, audioCtx)
    //   const sound = await audio.createdSource()
    //   const source = audio.playSource(sound)
    //   console.log(source.start)
    //   source.start(0)
    //   source.loop = true
    // },
    // handleSubmit() {
    //   const file = this.$refs.input.files[0]
    //   console.log(file)
    //   const files = new FileReader()
    //   files.readAsArrayBuffer(file)
    //   files.onload = (buf) => {
    //     console.log(files.result)
    //     // this.initAudio(files.result)
    //   }
    //   // this.initAudio()
    // }
  }
}
</script>

<style lang="scss" scoped>
.order{
  width: 100%;
  height: 200px;
  .order-content{
    line-height: 40px;
    height: 40px;
    width: 100%;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    padding: 0 15px;
    box-sizing: border-box;
    color: #F56C6C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    p {
      height: 100%;
    }
    &:hover{
      color:#1989fa;
    }
    &:nth-last-of-type(1) {
      border-bottom: 1px solid #dcdfe6
    }
  }
  .audio{
    width: 100%;
    height: 100px;
  }
  .dialog-title{
    display: flex
  }
  .custom-class{
    &：hover{
      color: #F56C6C;
    }
  }
}
</style>
